<!-- 页面 -->
<template>
    <div>
        <van-row>
            <van-col span="6" style="text-align: center;">
                <ul style="height: 100%;">
                    <li v-for="(item, index) in list" :key="index" style="height: 50px; background: aliceblue;"
                        @click="add(item.spus)">{{ item.name }}</li>
                </ul>
            </van-col>
            <van-col span="18" style="background: white;">
                <van-row style="background: #f8f8f8; margin-top: 10px;" v-for="(item, index) in spus1" :key="index">
                    <van-col span="8">
                        <img style="width: 100%;" :src=item.picture alt="">
                    </van-col>
                    <van-col span="16">
                        <b>{{ item.name }}</b>
                        <p>{{ item.description }}</p>
                        <b>{{ item.min_price | yuan }}</b>
                        <p><van-button style="width: 90px; float: right; height: 30px; font-size: 10px;" plain hairline
                                @click="jia(item)">加入购物车</van-button></p>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>

        <van-dropdown-menu direction="up" style="width: 100%; height: 100%; position: fixed; top: 85%;">
            <van-dropdown-item v-model="value">
                <div v-for="(item, index) in jiade" :key="index">
                    <p>{{ index+1 }}号口袋</p>
                    <van-row gutter="20" style="font-size: 10px; text-align: center;">
                        <van-col span="8">{{ item.name }}</van-col>
                        <van-col span="8">{{ item.price }}</van-col>
                        <van-col span="8">
                            <van-icon style="border:1px solid red;  border-radius: 50%;" name="minus" @click="jianshu(index)"/>
                            {{ item.shu }}
                            <van-icon style="border:1px solid red;  border-radius: 50%;" name="plus" @click="jiashu(index)"/>
                        </van-col>
                    </van-row>
                </div>

            </van-dropdown-item>
        </van-dropdown-menu>

        <van-submit-bar :price="zong" button-text="提交订单" @submit="ti()">
            <van-icon name="cart-o" size="30px" :content="5" />
        </van-submit-bar>
    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
            list: [],
            spus1: [],
            value: 0,
            switch1: false,
            switch2: false,
            option: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            jiade: [],
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('data.json').then(res => {
            this.list = res.data.data.foods
            this.spus1 = res.data.data.foods[0].spus
            console.log(this.list);
        })
    },
    // 调用方法
    methods: {
        add(spus) {
            this.spus1 = spus
            console.log(this.spus1);
        },
        ti() {
            localStorage.setItem('baocun',JSON.stringify(this.jiade) );
            this.$router.push('/ding')
        },
        onConfirm() {
            this.$refs.item.toggle();
        },
        jia(item) {
            console.log(item);
            this.jiade.push({
                name: item.name,
                price: item.min_price,
                shu: 1,
                picture: item.picture,
            })
        },
        jiashu(index){
            this.jiade[index].shu++;
        },
        jianshu(index){
            if(this.jiade[index].shu==0){

            }else{
              this.jiade[index].shu--;  
            }
            
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
        zong(){
            var jiage = 0
            this.jiade.forEach(item=>{
                jiage += item.price * item.shu*100
            })
            return jiage
        }
    },
    // 过滤器
    filters: {
        yuan(val) {
            return '￥' + val
        }
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style></style>